<template>
  <div class="bg_F4F6F9 login_page">
    <div class="login_body bg_fff">
      <!--top-->
      <div class="login_top row">
        <div class="login_title col-md-6 font_18 col_2577EF text-left">登陆</div>
        <div class="register_btn col-md-6 font_14 col_666 text-right pointer">
          <router-link to="/register">注册
            <span class="glyphicon glyphicon-play font_12" aria-hidden="true"></span>
          </router-link>
        </div>
      </div>
      <!--列表表单-->
      <ul class="login_form_list clear">
        <li class="text-left clear">
          <div class="form_list_label float_left">手机号码</div>
          <div class="form_list_input float_left"><input type="text" class="col_aaa tel_num" placeholder="请输入手机号码"></div>
        </li>
        <li class="text-left clear">
          <div class="form_list_label float_left">登陆密码</div>
          <div class="form_list_input float_left"><input type="password" class="col_aaa login_password" placeholder="请输入密码"></div>
        </li>
      </ul>
      <p class="text-right font_14 margin_top_10 forget_password_p"><router-link to="/forgetPassword">忘记密码？</router-link></p>
      <p class="col_FF5151 err_txt" v-if="err_txt">请完善信息！</p>
      <button type="button" class="login_btn login_register_btn bg_2577EF font_16 col_fff" @click="login_submit">登陆</button>
    </div>
  </div>

</template>

<script>

  //抛出
  export default {
    name: 'login',
    //注册组件
    components:{

    },
    data(){
        return{
            "err_txt":false
        }
    },
    //在模板渲染之前调用
    created (){

    },
    methods: {
        //提交数据
        login_submit () {
            let that = this;
            //非空校验
            let tel_num = $(".tel_num").val();
            let login_password = $(".login_password").val();
            if (this.checkStringNull(tel_num) && this.checkStringNull(login_password)){
                that.err_txt = true;
            } else {
                that.err_txt = false;
              //提交数据
              this.ajax_post('', {}, function (data) {
                if (data.status == 0) {
                    that.$router.push({path:'/home'});
                } else {
                    $(".err_txt").text(data.detail)
                }
              })
            }
        }
    },
    //在模板渲染之后调用
    mounted () {
        let that = this;
        that.base.ajax_get('/web/login/?ticket=',function (data) {
//            window.location.href = 'http://cas.xuemei99.com/web/cas/login?service=https%3A%2F%2Fwww.xuemei99.com%2Fweb%2Flogin%2F%3Fnext%3D%252F'
        })
    },
  }


</script>

<style scoped>
  .login_page{
    border: 1px solid rgba(255,255,255,0);
  }
  .login_top{
    margin: 0;
  }
  .login_title,.register_btn{
    padding: 0;
  }
  .register_btn a{
    color: #666666;
  }
  .login_body{
    position: relative;
    width: 380px;
    height: 430px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0px 2px 8px #D8DBE2;
  }
  .login_form_list{
    margin: 0;
    padding: 0;
  }
  .login_form_list li{
    width: 100%;
    border-bottom: 1px solid #EAECEF;
    margin-top: 40px;
    padding-bottom: 10px;
  }
  .form_list_label{
    width: 86px;
    font-size: 14px;
  }
  .form_list_input{
    width: calc(100% - 86px);
  }
  .form_list_input input{
    border: none;
    outline: none;
  }
  .forget_password_p a{
    color: #333333;
  }
  .login_btn{
    border-radius: 4px;
    width: 320px;
    height: 48px;
    line-height: 48px;
  }
  .login_register_btn{
    position: absolute;
    bottom: 30px;
    left: 30px;
  }
  .err_txt{
    margin-top: 140px;
  }

</style>
